<template>
	<view>
		<u-navbar title="闹铃" :autoBack="true" leftText="取消" rightText="储存" @rightClick="rightClick">
		</u-navbar>
		<view class="p-3">
			<view class="card" v-for="(item,index) in model" :key="index">
				<view class="px-3">
					<u--form labelPosition="left" :model="item" ref="form" labelWidth="150rpx">
						<u-form-item label="闹铃时间" prop="userInfo.name" borderBottom ref="item"
							@click="choiceTime(index)">
							<u--input v-model="item.value" placeholder="请选择闹铃时间" disabled border="none"></u--input>
						</u-form-item>
						<u-form-item label="重复周期" prop="userInfo.name" borderBottom ref="item"
							@click="choiceday(index)">
							<u--input v-model="item.checked" placeholder="请选择闹铃周期" disabled border="none"></u--input>
						</u-form-item>
					</u--form>
				</view>
			</view>
			<view class="px-3">
				<main-button @click="add">添加</main-button>
			</view>
		</view>
		<u-datetime-picker :show="showTime" v-model="value" @confirm="changeTime" @cancel="showTime = false"
			mode="time">
		</u-datetime-picker>
		<u-popup :show="show" mode="bottom" :round="10">
			<view style="height:auto;" class="p-2 pb-0 overflow-hidden">
				<view class="flex align-center justify-between mb-2">
					<view class="" @click="close">取消</view>
					<view class="text-main" @click="success">确定</view>
				</view>
				<u-checkbox-group v-model="checked" iconPlacement="right" placement="column">
					<u-checkbox :customStyle="{paddingBottom: '12px',marginTop: '10px'}" class="border-bottom"
						v-for="(item, index) in checkboxList" :key="index" :label="item.name" :name="item.name">
					</u-checkbox>
				</u-checkbox-group>
			</view>
		</u-popup>
		<u-loading-page :loading="loadingPage" bg-color="#e8e8e8"></u-loading-page>
	</view>
</template>

<script>
	import mainButton from '../../../components/common/main-buttom.vue';
	export default {
		data() {
			return {
				loadingPage: false,
				showTime: false,
				show: false,
				checked: [],
				itemData: [],
				model: [{
					value: "00:00",
					checked: "请选择闹铃周期"
				}],
				value: "",
				list: [],
				changeIndex: null,
				checkboxList: [{
						name: '周日',
						disabled: false,
						id: 0
					}, {
						name: '周一',
						disabled: false,
						id: 1
					},
					{
						name: '周二',
						disabled: false,
						id: 2
					},
					{
						name: '周三',
						disabled: false,
						id: 3
					},
					{
						name: '周四',
						disabled: false,
						id: 4
					},
					{
						name: '周五',
						disabled: false,
						id: 5
					},
					{
						name: '周六',
						disabled: false,
						id: 6
					}
				],
			}
		},
		components: {
			mainButton
		},
		onLoad() {
			this.getData()
		},
		methods: {
			choiceTime(index) {
				this.changeIndex = index
				this.showTime = true
			},
			choiceday(index) {
				this.changeIndex = index

				if (this.model[this.changeIndex].checked != "" && this.model[this.changeIndex].checked != "请选择闹铃周期") {
					this.checked = this.model[this.changeIndex].checked.split(',')
				}
				this.show = true
			},
			add() {
				let param = {
					value: "00:00",
					checked: "请选择闹铃周期"
				};
				this.model.push(param)
			},
			changeTime(e) {
				console.log(this.model)
				console.log(e)
				let flag=this.model.some((item) => {
					if (item.value == e.value) {
						return true
					}
				})
				if(flag){
					uni.showToast({
						title: "已存在相同的闹铃时间",
						icon: "none"
					})
				}else{
					this.model[this.changeIndex].value = e.value;
					this.showTime = false
				}
				
			},
			close() {
				this.show = false
			},
			success() {
				this.model[this.changeIndex].checked = this.checked.toString();
				this.show = false;
				this.checked = []
			},
			getData() {
				let _this = this;

				let opts = {
					url: 'task/readalarm?imei=' + uni.getStorageSync('imei'),
				};
				let param = {
					imei: uni.getStorageSync('imei')
				};
				_this.$http.httpDeveiceRequest(opts, param).then(
					res => {
						console.log(res.data);
						if (res.data.ReturnMsg == "success") {
							let arr = [];
							let datas = res.data.ReturnData;
							datas.forEach((item, index) => {
								console.log(item, index)
								let text = "";
								if (index == 0) {
									let param = {
										value: item.time,
										checked: []
									}
									if (item.weekdays == 0) {
										text = "周日"
									} else if (item.weekdays == 1) {
										text = "周一"
									} else if (item.weekdays == 2) {
										text = "周二"
									} else if (item.weekdays == 3) {
										text = "周三"
									} else if (item.weekdays == 4) {
										text = "周四"
									} else if (item.weekdays == 5) {
										text = "周五"
									} else if (item.weekdays == 6) {
										text = "周六"
									}
									param.checked.push(text);
									arr.push(param)
								} else {
									if (item.time == datas[index - 1].time) {
										if (item.weekdays == 0) {
											text = "周日"
										} else if (item.weekdays == 1) {
											text = "周一"
										} else if (item.weekdays == 2) {
											text = "周二"
										} else if (item.weekdays == 3) {
											text = "周三"
										} else if (item.weekdays == 4) {
											text = "周四"
										} else if (item.weekdays == 5) {
											text = "周五"
										} else if (item.weekdays == 6) {
											text = "周六"
										}
										arr.forEach((items) => {
											if (items.value == item.time) {
												items.checked.push(text)
											}
										})
									} else {
										let param = {
											value: item.time,
											checked: []
										}
										if (item.weekdays == 0) {
											text = "周日"
										} else if (item.weekdays == 1) {
											text = "周一"
										} else if (item.weekdays == 2) {
											text = "周二"
										} else if (item.weekdays == 3) {
											text = "周三"
										} else if (item.weekdays == 4) {
											text = "周四"
										} else if (item.weekdays == 5) {
											text = "周五"
										} else if (item.weekdays == 6) {
											text = "周六"
										}
										param.checked.push(text);
										arr.push(param)
									}
								}
							})
							arr.forEach((item) => {
								item.checked = item.checked.toString()
							})
							_this.model = arr;
						} else {
							// _this.list = [];
						}
					},
					error => {
						console.log(error);
					}
				);
			},
			rightClick() {
				// if (this.checked != "") {
				this.loadingPage = true;
				let obg = {
					alarmClock: []
				};

				this.model.forEach((item) => {
					item.checked.split(',').forEach((itemy) => {
						this.checkboxList.forEach((items) => {
							if (itemy == items.name) {
								const params = {
									time: item.value,
									weekdays: items.id
								}
								obg.alarmClock.push(params)
							}
						})
					})
				})
				let _this = this;
				let opts = {
					url: 'task/sendalarm?imei=' + uni.getStorageSync('imei') + '&appType=0&editable=true&item=' +
						obg
				};
				let param = {
					imei: uni.getStorageSync('imei'),
					appType: 0,
					editable: true,
					item: obg
				};
				_this.$http.httpDeveiceRequest(opts, param).then(
					res => {
						this.loadingPage = false;
						console.log(res.data.ReturnMsg);
						if (res.data.ReturnMsg == "success") {
							uni.showToast({
								title: "添加成功",
								icon: "none"
							})
							uni.navigateBack({
								delta: 1
							})
						}
					},
					error => {
						this.loadingPage = false;
						uni.showToast({
							title: "添加失败",
							icon: "none"
						})
						console.log(error);
					}
				);

				// } else {
				// 	uni.showToast({
				// 		title: "请选择闹铃周期",
				// 		icon: "none"
				// 	})
				// }
			}
		}
	}
</script>

<style>
	page {
		background-color: #F6F6F8;
	}

	/deep/.uni-input-input:disabled {
		background-color: #FFFFFF;
		text-align: right;
	}

	.card {
		background-color: #FFFFFF;
		border-radius: 10rpx;
		margin-bottom: 30rpx;
	}
</style>
